<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-13 11:45:41
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-31 11:27:08
 * @FilePath: \ProtocolTool\src\renderer\src\views\Devices\index.vue
-->
<script lang="ts">
export default {
  name: 'Devices'
}
</script>
<script lang="ts" setup>
import {
  getDevicePageAPI,
  getDeviceDetailAPI,
  updateDeviceAPI,
  offLineDeviceAPI,
  deleteDeviceAPI,
  addDeviceAPI,
  instrOnlineAPI,
  downlineALLSocketAPI
} from '@/api/Devices'
import { useRouter } from 'vue-router'
import { h, computed, onMounted } from 'vue'
import {
  SearchOutlined,
  EditOutlined,
  PoweroffOutlined,
  SyncOutlined,
  PlusCircleOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { ipRuleValidator } from '@/utils/ipRuleValidator'
import { useSocketStoreHook } from '@/store/modules/websocket'

// 设备列表
const deviceList = ref([])

const columns = [
  {
    title: '设备名称',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
    ellipsis: true
  },
  {
    title: '设备ID',
    width: 130,
    dataIndex: 'clientId',
    key: 'clientId',
    // fixed: 'left',
    ellipsis: true
  },
  { title: '协议类型', dataIndex: 'protocolType', key: 'protocolType' },
  {
    title: '数据包类型',
    dataIndex: 'dataType',
    key: 'dataType',
    customRender: (text: any): any => {
      const type = text.record.dataType
      if (type === 0) {
        return 'json'
      } else if (type === 1) {
        return 'protobuf'
      }
    }
  },
  {
    title: '学科类型',
    dataIndex: 'instrType',
    customRender: (text: any): any => {
      const type = text.record.instrType
      if (type === 1) {
        return '地磁'
      } else if (type === 2) {
        return '地电'
      } else if (type === 3) {
        return '流体'
      } else if (type === 4) {
        return '形变'
      } else if (type === 5) {
        return '重力'
      } else if (type === 6) {
        return '辅助'
      }
    }
  },
  {
    title: '设备状态',
    dataIndex: 'status',
    key: 'status'
    // customRender: (text: any): any => {
    //   const status = text.record.status
    //   const params = ['离线', '在线']
    //   const colorObj = {
    //     '0': 'color: #fe9400;',
    //     '1': 'color: #17c411;'
    //   }
    //   const iconObj = {
    //     '0': 'icon iconfont icon-kulian1',
    //     '1': 'icon iconfont icon-xiaolian'
    //   }
    //   const value = params[status]
    //   // jsx写法
    //   return h('div', { style: colorObj[String(status)], class: iconObj[String(status)] }, value)
    // }
  },

  {
    title: '设备IP',
    dataIndex: 'ip',
    key: 'ip',
    width: 150,
    ellipsis: true
  },
  {
    title: '台站ID', //stationId
    dataIndex: 'stationId',
    key: 'stationId',
    ellipsis: true
  },
  {
    title: '台站名称', //stationName
    dataIndex: 'stationName',
    key: 'stationName',
    ellipsis: true
  },
  {
    title: '设备连接端口',
    dataIndex: 'port',
    key: 'port',
    ellipsis: true
  },
  // {
  //   title: '设备MQTT版本',
  //   dataIndex: 'mqttV',
  //   key: 'mqttV'
  // },
  {
    title: '操作',
    key: 'action',
    fixed: 'right',
    width: 130
  }
]

// 总条数
const total = ref(0)
// 分页查询参数
const pageParams = ref({
  pageIndex: 1,
  pageSize: 10
})
// 获取设备分页
const getDevicePage = async () => {
  const res = await getDevicePageAPI(pageParams.value)
  deviceList.value = res.data.records
  total.value = res.data.total
}
onMounted(() => {
  getDevicePage()
})
//刷新页面按钮
// const refreshLoading = ref(false)
// const refresh = async () => {
//   try {
//     refreshLoading.value = true
//     await getDevicePage()
//     //清空输入框、下拉选择这类的东西
//     searchParams.value.name = ''
//     searchParams.value.instrType = null
//     searchParams.value.status = null
//     searchParams.value.protocolType = ''
//   } catch (e) {
//     console.log(e)
//   } finally {
//     refreshLoading.value = false
//   }
// }
// 处理分页
const handlePageChange = ({ current, pageSize }) => {
  pageParams.value.pageIndex = current
  pageParams.value.pageSize = pageSize
  getDevicePage()
}
/* 条件搜索查询----------------------------------------------------------------------------------------------------- */
const searchParams = ref<any>({
  name: '', //设备名称
  // instrType: null, //学科类型
  status: null, //设备状态
  protocolType: '' //协议类型
})
const searchDevice = async () => {
  try {
    pageParams.value.pageIndex = 1
    searceLoading.value = true
    const res = await getDevicePageAPI(searchParams.value)
    deviceList.value = res.data.records
  } catch (e) {
    console.log(e)
  } finally {
    searceLoading.value = false
  }
}
//搜索loading效果
const searceLoading = ref<any>(false)

//旋转参数
const rotation = ref(false)
//重置
const resetFn = async () => {
  try {
    pageParams.value.pageIndex = 1
    rotation.value = true
    await getDevicePage()
    //清空输入框、下拉选择这类的东西
    searchParams.value.name = ''
    searchParams.value.instrType = null
    searchParams.value.status = null
    searchParams.value.protocolType = ''
  } catch (e) {
    console.log(e)
  } finally {
    rotation.value = false
  }
}

/* 对话框模块 -----------------------------------------------------------------------*/
const open = ref<boolean>(false)
const editDeviceData = ref({
  name: '', //设备名称
  instrType: 1, //学科类型
  id: '', //设备id
  clientId: '', //学科类型,
  stationId: '', //台站ID
  stationName: '', //台站Name
  protocolType: 'MQTT', //协议类型
  dataType: 0, //数据包类型0 json 1
  ip: '',
  port: ''
})
const editDevice = (text, record, index, column) => {
  open.value = true
  console.log(text, record, index, column)
  // 数据返显赋值
  editDeviceData.value.name = text.name
  editDeviceData.value.instrType = text.instrType
  editDeviceData.value.clientId = text.clientId
  editDeviceData.value.id = text.id
  editDeviceData.value.stationId = text.stationId
  editDeviceData.value.stationName = text.stationName
  editDeviceData.value.protocolType = text.protocolType
  editDeviceData.value.dataType = text.dataType
  editDeviceData.value.ip = text.ip
  editDeviceData.value.port = text.port
}

//编辑设备更改确定
const editSuccess = async () => {
  try {
    iconLoading.value = true
    await updateDeviceAPI(editDeviceData.value)
    //刷新页面
    getDevicePage()
  } catch (e) {
    console.log(e)
  } finally {
    iconLoading.value = false
    open.value = false
  }
}
//loading效果
const iconLoading = ref<any>(false)

/* 表单校验---------------------------------------------------------------------- */
const handleCancel = () => {
  open.value = false
}
//表单实例
const formRef = ref()
//校验逻辑
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      editSuccess()
    })
    .catch((error) => {
      console.log('error', error)
    })
}

// 下线MQTT设备
const offline = async (text) => {
  const clientId = text.clientId
  const name = text.name
  // console.log('123', clientId)
  await offLineDeviceAPI(clientId)
  message.success({
    content: name + '设备下线成功!',
    duration: 1
  })
  //刷新页面
  getDevicePage()
}

// 断开连接Socket设备
const offlineSocket = async (text) => {
  const clientId = text.clientId
  const name = text.name
  // console.log('123', clientId)
  await offLineDeviceAPI(clientId)
  message.success({
    content: name + '设备断开连接成功!',
    duration: 1
  })
  //刷新页面
  getDevicePage()
}

//跳转手动测试和一键测试
const router = useRouter()
const gotoManual = (text: any) => {
  console.log('1', text)
  router.push({ path: 'Manual', query: { id: text.clientId } })
}
const gotoOneClick = (text: any) => {
  console.log('2', text)
  router.push({ path: 'one-click', query: { id: text.clientId } })
}

//socket协议类型的主动连接设备
const key = 'updatable'
const connected = async (text) => {
  const name = text.name
  try {
    message.loading({
      content: name + '正在尝试连接中...',
      key,
      duration: 100
    })
    const res = await instrOnlineAPI(text.clientId)
    if (res.data) {
      message.success({
        content: name + '设备上线',
        key,
        duration: 2
      })
      //刷新页面
      getDevicePage()
    } else {
      message.warning({
        content: name + '设备连接失败',
        key,
        duration: 2
      })
    }
  } catch (e) {
    message.error({
      content: '网络或服务器错误',
      key,
      duration: 2
    })
    console.log(e)
  } finally {
    //刷新页面
    getDevicePage()
  }
}

/*详情抽屉 --------------------------------------------------------------------------------------------------- */
const openDrawer = ref(false)
const dataInfo = ref({
  clientId: '',
  dataType: 0,
  id: 0,
  instrType: 0,
  ip: '',
  keepalive: 0,
  mqttV: '',
  offlineTime: '',
  onlineTime: '',
  port: '',
  protocolType: '',
  stationId: '',
  stationName: '',
  status: 0,
  username: ''
})

const showDrawer = async (id) => {
  // console.log(777111111, record)
  openDrawer.value = true
  const res = await getDeviceDetailAPI(id)
  Object.assign(dataInfo.value, res.data)
}
const instrTypeRender = computed(() => {
  const arr = ['', '地磁', '地电', '流体', '形变', '重力', '辅助']
  return arr[dataInfo.value.instrType]
})
// const statusRender = computed(() => {
//   const arr = ['离线', '在线']
//   return arr[dataInfo.value.status]
// })

//删除设备
const confirm = async (text) => {
  await deleteDeviceAPI(text.id)
  message.success('删除设备成功')
  getDevicePage()
}
const cancel = () => {
  message.error('取消删除')
}
const cancelOffline = () => {
  message.error('取消下线')
}
const cancelOfflineSocket = () => {
  message.error('取消断开连接')
}

/*新增设备 -------------------------------------------------------------------------------------------------------*/
//表单实例
const addFormRef = ref()
const addOpen = ref(false)
//添加按钮
const add = () => {
  addOpen.value = true
  if (addFormRef.value) {
    addFormRef.value.resetFields() // 清除校验状态并重置字段到初始值
  }
  // addFormRef.value.resetFields()
}
const addInfo = ref({
  clientId: '',
  instrType: null,
  name: '',
  ip: '',
  port: '',
  stationId: '',
  stationName: '',
  protocolType: 'Socket'
})
const cancelAdd = () => {
  addOpen.value = false
}

const addRules = {
  clientId: { required: true, message: '请输入设备ID!' },
  instrType: { required: true, message: '请选择学科类型!' },
  name: { required: true, message: '请输入设备名称!' },
  ip: [
    {
      required: true,
      // message: '请输入设备IP!',
      validator: ipRuleValidator,
      trigger: ['change', 'blur']
    }
  ],
  port: { required: true, message: '请输入设备端口号!' },
  stationId: { required: true, message: '请输入台站ID!' },
  stationName: { required: true, message: '请输入台站名称!' },
  protocolType: { required: true, message: '请输入协议类型!' }
}
const addloading = ref(false)
const addForm = () => {
  addFormRef.value
    .validate()
    .then(async () => {
      addloading.value = true
      // console.log('add', addInfo.value)
      await addDeviceAPI(addInfo.value)
      await getDevicePage()
      addOpen.value = false
    })
    .catch((error) => {
      console.log('error', error)
    })
    .finally(() => (addloading.value = false))
}
/*  订阅刷新列表------------------------------------------------------------------------------*/
const useSocketStore = useSocketStoreHook()
let topic
onMounted(() => {
  topic = useSocketStore.stompClient.subscribe('/topic/instr', (msg: any) => {
    // console.log('元祥', msg)
    let clientId = ''
    let status = ''
    const body = msg.body
    // 匹配clientId
    const match1 = body.match(/clientId = (\w+)/)
    if (match1 && match1.length > 1) {
      clientId = match1[1]
    }
    // 匹配状态
    // let match2 = body.match(/\[(上线)\]/)
    // let match3 = body.match(/\[(下线)\]/)
    // let match4 = body.match(/\[(新增)\]/)
    // if (match2) {
    //   status = match2[1] // 第一个捕获组的内容
    // } else if (match3) {
    //   status = match3[1]
    // } else {
    //   status = match4[1]
    // }
    //简短版本匹配,只匹配str最后一个方括号的内容
    const match2 = body.match(/\[([^\[\]]*)\](?!.*\[[^\[\]]*\])/)
    if (match2) {
      status = match2[1]
    }
    //刷新页面
    getDevicePage()
    message.success({
      content: '设备' + clientId + '成功' + status,
      duration: 2
    })
  })
})
onUnmounted(() => {
  topic?.unsubscribe()
})

//一键下线socket
const openDownline = ref<boolean>(false)
const showDownline = () => {
  openDownline.value = true
}
const downlineALLSocket = async () => {
  await downlineALLSocketAPI()
  openDownline.value = false
  message.success('断开所有Socket设备成功')
  //刷新列表
  getDevicePage()
}
</script>

<template>
  <div class="container">
    <!-- 搜索表单 -->
    <div>
      <a-form :model="searchParams">
        <a-row :gutter="{ xs: 8, sm: 16, md: 24 }">
          <a-col :span="6"
            ><a-form-item label="设备名称">
              <a-input v-model:value="searchParams.name" @change="searchDevice">
              </a-input> </a-form-item
          ></a-col>

          <!-- <a-form-item label="学科类型">
          <a-select
            ref="select"
            v-model:value="searchParams.instrType"
            style="width: 140px"
            @change="searchDevice"
          >
            <a-select-option :value="0" disabled>选择学科</a-select-option>
            <a-select-option :value="1">地磁</a-select-option>
            <a-select-option :value="2">地电</a-select-option>
            <a-select-option :value="3">流体</a-select-option>
            <a-select-option :value="4">形变</a-select-option>
            <a-select-option :value="5">重力</a-select-option>
            <a-select-option :value="6">辅助</a-select-option>
          </a-select>
        </a-form-item> -->
          <a-col :span="6">
            <a-form-item label="设备状态">
              <a-select ref="select" v-model:value="searchParams.status" @change="searchDevice">
                <a-select-option :value="-1" disabled>选择状态</a-select-option>
                <a-select-option :value="0">离线</a-select-option>
                <a-select-option :value="1">在线</a-select-option>
              </a-select>
            </a-form-item></a-col
          >
          <a-col :span="6">
            <a-form-item>
              <a-button
                type="primary"
                :loading="searceLoading"
                :icon="h(SearchOutlined)"
                @click="searchDevice"
              >
                查询
              </a-button>
              <a-button style="margin-left: 10px" @click="resetFn">
                <sync-outlined :spin="rotation" />重置
              </a-button>
            </a-form-item>
          </a-col>
          <a-col :span="6"> </a-col>
        </a-row>
        <a-row>
          <a-form-item>
            <a-button style="color: rgb(0, 185, 107)" @click="add"
              ><PlusCircleOutlined />新增设备</a-button
            >

            <a-button style="margin-left: 15px" type="primary" @click="showDownline"
              >一键断开Socket</a-button
            >
          </a-form-item>
        </a-row>
      </a-form>
    </div>

    <!-- 设备表格 -->
    <div class="list">
      <a-table
        :data-source="deviceList"
        :columns="columns"
        size="small"
        :scroll="{ x: 1300, y: 300 }"
        :pagination="{ total: total, current: pageParams.pageIndex, pageSize: pageParams.pageSize }"
        @change="handlePageChange"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'name'">
            <a @click="showDrawer(record.id)">{{ record.name }}</a>
          </template>
          <template v-if="column.key === 'clientId'">
            <a style="color: rgb(75, 149, 254)" @click="showDrawer(record.id)">{{
              record.clientId
            }}</a>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.status === 0" :bordered="false" color="error"> 离线 </a-tag>
            <a-tag v-if="record.status === 1" :bordered="false" color="success"> 在线 </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-dropdown-button @click="editDevice(text, record, index, column)">
              <EditOutlined /> 编辑
              <template #overlay>
                <a-menu>
                  <template v-if="text.status === 1">
                    <a-menu-item key="1" @click="gotoManual(text)">手动测试 </a-menu-item>
                    <a-menu-item key="2" @click="gotoOneClick(text)"> 一键测试 </a-menu-item>
                  </template>
                  <div v-if="text.status === 0 && text.protocolType === 'Socket'">
                    <a-menu-item key="5" @click="connected(text)"> 连接 </a-menu-item>
                  </div>
                  <template v-if="text.status === 1 && text.protocolType === 'MQTT'">
                    <a-menu-item key="3">
                      <a-popconfirm
                        :title="`你确定下线${text.name}设备吗?`"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="offline(text)"
                        @cancel="cancelOffline"
                      >
                        <a href="#">下线</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </template>
                  <template v-if="text.status === 1 && text.protocolType === 'Socket'">
                    <a-menu-item key="3">
                      <a-popconfirm
                        :title="`你确定断开连接${text.name}设备吗?`"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="offlineSocket(text)"
                        @cancel="cancelOfflineSocket"
                      >
                        <a href="#">断开连接</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </template>
                  <a-menu-item key="4">
                    <a-popconfirm
                      :title="`你确定删除${text.name}设备吗?`"
                      ok-text="Yes"
                      cancel-text="No"
                      @confirm="confirm(text)"
                      @cancel="cancel"
                    >
                      <a href="#">删除设备</a>
                    </a-popconfirm>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown-button>
            <!-- <a-button type="link" :icon="h(SearchOutlined)">Link Button</a-button> -->
          </template>
        </template>
      </a-table>
    </div>
    <!-- 对话框 -->
    <div>
      <a-modal v-model:open="open" centered title="编辑设备" @ok="handleOk">
        <a-form
          ref="formRef"
          :model="editDeviceData"
          :data-source="editDeviceData"
          :label-col="{ style: { width: '100px' } }"
        >
          <a-form-item
            label="设备名称"
            name="name"
            :rules="[{ required: true, message: '请输入设备名称!' }]"
          >
            <a-input v-model:value="editDeviceData.name" class="input" placeholder="请输入设备名称">
            </a-input>
          </a-form-item>
          <a-form-item
            label="协议类型"
            name="protocolType"
            :rules="[{ required: true, message: '请选择协议类型!' }]"
          >
            <a-select ref="select" v-model:value="editDeviceData.protocolType" disabled>
              <a-select-option value="MQTT">MQTT</a-select-option>
              <a-select-option value="Socket">Socket</a-select-option>
            </a-select>
          </a-form-item>
          <!-- if-else判断socket部分------------>
          <div v-if="editDeviceData.protocolType === 'Socket'">
            <a-form-item
              label="IP"
              name="ip"
              :rules="[
                {
                  required: true,
                  validator: ipRuleValidator,
                  trigger: ['change', 'blur']
                }
              ]"
            >
              <a-input v-model:value="editDeviceData.ip" class="input" placeholder="请输入设备IP">
              </a-input>
            </a-form-item>
            <a-form-item
              label="端口"
              name="port"
              :rules="[{ required: true, message: '请输入设备端口号!' }]"
            >
              <a-input
                v-model:value="editDeviceData.port"
                class="input"
                placeholder="请输入设备端口号"
              >
              </a-input>
            </a-form-item>
          </div>
          <div v-else>
            <a-form-item
              label="数据包类型"
              name="dataType"
              :rules="[{ required: true, message: '请选择协议类型!' }]"
            >
              <a-select ref="select" v-model:value="editDeviceData.dataType">
                <a-select-option :value="0">JSON</a-select-option>
                <a-select-option :value="1">PROTOBUF</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <a-form-item
            label="台站ID"
            name="stationId"
            :rules="[{ required: true, message: '请输入台站ID!' }]"
          >
            <a-input
              v-model:value="editDeviceData.stationId"
              class="input"
              placeholder="请输入台站ID"
            >
            </a-input>
          </a-form-item>
          <a-form-item
            label="台站名称"
            name="stationName"
            :rules="[{ required: true, message: '请输入台站名称!' }]"
          >
            <a-input
              v-model:value="editDeviceData.stationName"
              class="input"
              placeholder="请输入台站名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item
            label="学科类型"
            name="instrType"
            :rules="[{ required: true, message: '请选择学科类型!' }]"
          >
            <a-select ref="select" v-model:value="editDeviceData.instrType">
              <a-select-option :value="1">地磁</a-select-option>
              <a-select-option :value="2">地电</a-select-option>
              <a-select-option :value="3">流体</a-select-option>
              <a-select-option :value="4">形变</a-select-option>
              <a-select-option :value="5">重力</a-select-option>
              <a-select-option :value="6">辅助</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <!-- 自定义对话框页脚 -->
        <template #footer>
          <a-button key="back" @click="handleCancel">返回</a-button>
          <a-button key="submit" type="primary" :loading="iconLoading" @click="handleOk"
            ><template #icon><PoweroffOutlined /></template>提交</a-button
          >
        </template>
      </a-modal>
    </div>
    <!-- 设备详情 -->
    <a-modal
      v-model:open="openDrawer"
      class="custom-class"
      centered
      :footer="null"
      title="设备详情"
    >
      <a-card>
        <p>
          <span>状态:</span>
          <!-- <span>{{ statusRender }}</span> -->
          <span>
            <a-tag v-if="dataInfo.status === 0" :bordered="false" color="error"> 离线 </a-tag>
            <a-tag v-if="dataInfo.status === 1" :bordered="false" color="success"> 在线 </a-tag>
          </span>
        </p>

        <p>
          <span>设备ID:</span>
          <span>
            <a-tag :bordered="false" color="success">
              {{ dataInfo.clientId }}
            </a-tag>
          </span>
        </p>
        <p>
          <span>ip:</span>
          <span>
            {{ dataInfo.ip }}
          </span>
        </p>
        <p>
          <span>端口号:</span><span>{{ dataInfo.port }}</span>
        </p>
        <p>
          <span>台站ID:</span><span>{{ dataInfo.stationId }}</span>
        </p>

        <p>
          <span>台站名称:</span><span>{{ dataInfo.stationName }}</span>
        </p>
        <p>
          <span>学科类型:</span><span>{{ instrTypeRender }}</span>
        </p>
        <p>
          <span>用户名:</span><span>{{ dataInfo.username }}</span>
        </p>
        <p>
          <span>mqtt版本:</span><span>{{ dataInfo.mqttV }}</span>
        </p>
        <p>
          <span>数据包类型:</span><span>{{ dataInfo.dataType === 0 ? 'JSON' : 'PROTOBUF' }}</span>
        </p>

        <p>
          <span>监测在线频率:</span><span>{{ dataInfo.keepalive }}秒</span>
        </p>
        <p>
          <span>上线时间:</span><span>{{ dataInfo.onlineTime }}</span>
        </p>
        <p>
          <span>下线时间:</span><span>{{ dataInfo.offlineTime }}</span>
        </p>
      </a-card>
    </a-modal>
    <!-- 新增设备弹窗 -->
    <div>
      <a-modal v-model:open="addOpen" centered title="新增设备">
        <a-form
          ref="addFormRef"
          :model="addInfo"
          :rules="addRules"
          :data-source="addInfo"
          :label-col="{ style: { width: '100px' } }"
        >
          <a-form-item label="设备ID" name="clientId">
            <a-input v-model:value="addInfo.clientId" />
          </a-form-item>
          <a-form-item label="学科类型" name="instrType">
            <a-select v-model:value="addInfo.instrType" label="学科类型">
              <a-select-option :value="0" disabled>选择学科</a-select-option>
              <a-select-option :value="1">地磁</a-select-option>
              <a-select-option :value="2">地电</a-select-option>
              <a-select-option :value="3">流体</a-select-option>
              <a-select-option :value="4">形变</a-select-option>
              <a-select-option :value="5">重力</a-select-option>
              <a-select-option :value="6">辅助</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="设备名称" name="name">
            <a-input v-model:value="addInfo.name" />
          </a-form-item>
          <a-form-item label="设备IP" name="ip">
            <a-input v-model:value="addInfo.ip" />
          </a-form-item>
          <a-form-item label="设备端口号" name="port">
            <a-input v-model:value="addInfo.port" />
          </a-form-item>
          <a-form-item ref="name" label="台站ID" name="stationId">
            <a-input v-model:value="addInfo.stationId" />
          </a-form-item>
          <a-form-item label="台站名称" name="stationName">
            <a-input v-model:value="addInfo.stationName" />
          </a-form-item>
          <a-form-item label="协议类型" name="prototType">
            <a-input v-model:value="addInfo.protocolType" disabled />
          </a-form-item>
        </a-form>
        <!-- 自定义对话框页脚 -->
        <template #footer>
          <a-button key="back" @click="cancelAdd">返回</a-button>
          <a-button key="submit" type="primary" :loading="addloading" @click="addForm"
            >提交</a-button
          >
        </template>
      </a-modal>
    </div>
    <!-- 一件下线设备弹窗 -->
    <a-modal
      centered
      style="width: 400px"
      v-model:open="openDownline"
      title="提示:"
      @ok="downlineALLSocket"
    >
      <p>你确定一键断开连接所有Socket设备吗?</p>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
:deep(::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

/*定义滚动条轨道 内阴影+圆角*/
:deep(::-webkit-scrollbar-track) {
  border-radius: 10px;
}

/*定义滑块 内阴影+圆角*/
:deep(::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  background-color: #ddd;
}

.custom-class p {
  // margin: 0 auto;
  display: flex;
  justify-content: space-between;
  color: black;
  align-items: center;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.custom-class p span:nth-child(2) {
  // flex: 1;
  width: 50%;
  text-align: start;
}
.custom-class p span:nth-child(1) {
  font-weight: bold;
}

.custom-class svg :hover {
  background-color: red;
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}

.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
